import React, { FC, ReactNode } from 'react';
import { Layout } from 'antd';
import style from './index.less';

export interface PageContainerProps {
  header: ReactNode;
  children: ReactNode;
  // eslint-disable-next-line react/require-default-props
  subHeader?: ReactNode;
}

export const PageContainer: FC<PageContainerProps> = props => {
  const { header, children, subHeader } = props;

  return (
    <Layout style={{ minHeight: '100vh' }}>
      {header && (
        <div className={style.header}>
          {header}
          <div className={style['sub-header']}>{subHeader}</div>
        </div>
      )}
      <div className={style.content}>{children}</div>
    </Layout>
  );
};
